<template>
  <a-modal :title=" type == 'electricityBill'?'查看电费账单详情': type =='water'?'查看水费账单详情':'查看房租账单详情'" :width="1000" :maskClosable="false" :visible="visible" @cancel="visible = false">
    <a slot="footer">
      <a-button @click="visible = false">关闭</a-button>
    </a>
    <a-spin :indicator="indicator" :spinning="spinning" :tip="tip">
      <div class="spin-content">
        <a-descriptions :column="1" v-if="type != 'rent'">
          <a-descriptions-item label="表编号">
            {{ type == 'water' ? detail.waterMeter : detail.electricityMeter }}
          </a-descriptions-item>
          <a-descriptions-item label="本月抄表示数">
            {{ detail.currentMonthMeterReading }}
          </a-descriptions-item>
          <a-descriptions-item label="上月抄表示数">
            {{ detail.lastMonthMeterReading }}
          </a-descriptions-item>
          <a-descriptions-item label="单价">
            {{ detail.unitPrice }}
          </a-descriptions-item>
          <a-descriptions-item label="账单日期">
            {{`${detail.year}年${detail.month}月`}}
          </a-descriptions-item>
          <a-descriptions-item label="账单金额">
            {{ detail.money }}元
          </a-descriptions-item>
          <a-descriptions-item label="是否支付">
            {{ detail.IsPay ? '已支付':'未支付' }}
          </a-descriptions-item>
          <a-descriptions-item label="抄表时间">
            {{ $moment(detail.addTime).format("YYYY-MM-DD HH:mm:ss") }}
          </a-descriptions-item>
          <a-descriptions-item label="抄表图片">
            <img style="width:150px;height:150px" :src="detail.readingPicUrl" @click="handlePreview(detail.readingPicUrl)" alt="">
          </a-descriptions-item>
          <a-descriptions-item label="备注">
            <!-- <img :src="detail.readingPicUrl" @click="handlePreview(detail.readingPicUrl)" alt=""> -->
            {{ detail.remark }}
          </a-descriptions-item>

        </a-descriptions>
        <a-descriptions :column="1" v-else>
          <a-descriptions-item label="合同编号">
            {{detail.ContractNo}}
          </a-descriptions-item>
          <a-descriptions-item label="乙方">
            {{detail.LinkMan}}
          </a-descriptions-item>
          <a-descriptions-item label="账单日期">
            {{`${detail.PayYear}年${detail.billingPeriod}`}}
          </a-descriptions-item>
          <a-descriptions-item label="账单金额">
            {{detail.rent }}元
          </a-descriptions-item>
          <a-descriptions-item label="是否支付">
            {{ detail.isPay ? '已支付':'未支付' }}
          </a-descriptions-item>
          <a-descriptions-item label="支付时间">
            {{ $moment(detail.PayTime).format("YYYY-MM-DD HH:mm:ss") }}
          </a-descriptions-item>
          <a-descriptions-item label="备注">
            {{ detail.remark}}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-spin>
    <photo-modal ref="photomodal"></photo-modal>

  </a-modal>
</template>

<script>
import PhotoModal from "@/views/photoModal";

export default {
  name: "",
  components: { PhotoModal },
  props: {
    actionType: {
      type: String,
      required: false,
      default: "add",
    },
    type: {
      type: String,
      required: false,
    },
  },
  data () {
    return {
      visible: false,
      button_loading: false,
      spinning: false,
      tip: null,
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      detail: {}
    };
  },
  computed: {},
  watch: {},
  created () { },
  mounted () { },
  methods: {
    view (data) {
      if (data) {
        Object.assign(this, {

          visible: true,
          CodeDisabled: false,
          currentId: data.id,
        });
        this.detail = data;
      }
    },
    handlePreview (file) {
      this.$refs.photomodal.view(file);
    },
  },
};
</script>
<style>
/** lang='less' scoped */
</style>
